<template>
    <div class="div1">
        {{ AddAListOfKnowledgeBasesForm }}
        <!-- {{ PictureIdiom }} -->
        <div class="div1-1">
            <!-- <img src='http://101.43.223.224:8765/image/getImageById?id=' idiomImgId style="width: 100%; height: 100%;"> -->
            <!-- <template slot-scope="scope"> -->
              <el-image style="width: 120px; height: 70px" :src="
                  'http://101.43.223.224:8765/image/getImageById?id=' + idiomImgId">
              </el-image>
            <!-- </template> -->
        </div>
        <div style="height: 60px; width: 100%"></div>
        <div class="div2">
            <div class="div2-1" v-for="item in 4" :key="item">
            <!-- <div class="div2-1" v-for="(character, index) in filteredCharacters(stageId)" :key="index"> -->
                <!-- <template v-if="index !== getCharacterIndexById(stageId)">
                {{ character }}
                </template>
                <template v-else>
                {{ characterDianji }}
                </template> -->
            </div>
        </div>
            <div style="height: 60px; width: 100%"></div>
            
            <div class="div3">
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeOne }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeTwo }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeThree }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.correctOne }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.correctThree }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.correctTwo }}
                </div>
            </div>
            <div style="height: 20px; width: 100%; "></div>
            
            <div class="div3">
                <!-- <div class="div3-1" v-for="item in 6" :key="item"></div> -->                                                                                   
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeFour }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeFive }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.correctFour }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeSeven }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeSix }}
                </div>
                <div class="div3-1" v-for="(item, index) in PictureIdiom.slice(0,6)" 
                :key="index">
                    {{ item.mistakeEight }}
                </div>
            </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            AddAListOfKnowledgeBasesForm:{},
            PictureIdiom:[],
            id: '',
            aaa: '',
        }
    },
    mounted () {
        this.getPictureIdiom()
    },
    created () {
        // 获取路由的参数
        const rowParam = this.$route.query.id;
        if (rowParam) {
        const row = JSON.parse(decodeURIComponent(rowParam));
        // 对获取到的数据对象进行操作
        this.AddAListOfKnowledgeBasesForm = row
        }

    },

    methods: {
        getPictureIdiom () {
            this.id = this.AddAListOfKnowledgeBasesForm
            this.aaa = this.PictureIdiom.pictureTypos
            this.$axios.get('/PictureIdiomQuestion/getByIdIdiom', {
                params: {
                    id: this.id
                }
            }).then (res => {   
                if(res.data.flag) {
                    this.PictureIdiom = res.data.data
                    console.log(this.PictureIdiom.pictureTypos);
                }
            }).catch(err => {
                this.Mymessage('error', err)
            })
        }
    }
}
</script>

<style>
    .div1{
        width: 500px;
        height: 600px;
    }
    .div1-1{
        width: 200px;
        height: 200px;
        margin-left: 30%;
    }
    .div3{
        width: 100%;
        height: 70px;
        /* margin-left: 20%; */
        display: flex;
        /* background: purple; */
        justify-content: space-around;
    }
    .div3-1{
        width: 70px;
        border: 1px solid black;
        border-radius: 10px;
        text-align: center; /* 文字居中 */
        font-size: 16px; /* 字体大小，可根据需要自定义 */
        margin: 5px; /* 设置字符框之间的间距，可根据需要自定义 */
        display: inline-block; /* 使字符框水平排列 */
    }
    
    .div2{
        width: 60%;
        height: 70px;
        margin-left: 20%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        background: red;
    }
    .div2-1{
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 30px;
        font-weight: bolder;
    }
</style>